import { useState, useEffect } from 'react'
import Style from './SmsVerify.module.css'

import IconClose from '../../assets/close.svg'

function Header(props) {
  return (
    <div className={Style.Header}>
      <span>提示</span>
      <img src={IconClose} alt="" onClick={props.cancel} />
    </div>
  )
}

function Content(props) {
  const [seconds, setSeconds] = useState(0)

  useEffect(() => {
    setTimeout(() => {
      let s = seconds - 1
      s > -1 && setSeconds(s)
    }, 1000)
  }, [seconds])

  const send = () => {
    props.send(props.mobile)
    setSeconds(60)
  }

  const formatMobile = (val) => {
    if (!val) return val
    if (typeof(val) !== 'string') {
      val = String(val)
    }
    if (val.length !== 11) return val
    return `${val.substr(0, 3)}****${val.substr(7)}`
  }

  const input = (i, e) => {
    const v = e.target.value
    props.input(i, v)
    if (!!v) {
      setTimeout(()=>{
        const dom = document.getElementById(`sv-input-${++i}`)
        !!dom && dom.focus()
      }, 0)
    }
  }

  return (
    <div className={Style.Content}>
      <span>为了保障平台的数据安全和您的账号安全，请发送并输入短信验证码验证您的身份</span>
      { seconds > 0 ?
        <div className={Style.DownTime}>
          <span>已发送验证码至{formatMobile(props.mobile)}</span>
          <span>{seconds}S</span>
        </div> : 
        <div className={Style.Sms}>
          <span>短信验证码</span>
          <span onClick={send}>发送验证码</span>
        </div>
      }
      <div className={Style.Input}>
        { [0,1,2,3].map(i=>{
            return <input
              key={i.toString()} 
              id={`sv-input-${i}`} 
              maxLength={1} 
              autoComplete="off"
              onChange={e=>input(i, e)}
            />
          })
        }
      </div>
    </div>
  )
}

function Warning() {
  return (
    <div className={Style.Warning}>
      请输入正确的手机验证码
    </div>
  )
}

function Footer(props) {
  return (
    <div className={Style.Footer}>
      <span onClick={props.confirm}>确 定</span>
      <span onClick={props.cancel}>取 消</span>
    </div>
  )
}

function SmsVerify(props) {
  const [animation, setAnimation] = useState('fadeInDown')
  const [isWarning, setIsWaring] = useState(false)
  const [codes, setCodes] = useState([])

  const send = () => {
    props.send()
  }

  const input = (i, e) => {
    const temp = [...codes]
    temp[i] = e
    setCodes(temp)
    setIsWaring(false)
  }

  const cancel = () => {
    setAnimation('fadeOutDown')
    setTimeout(()=>{ props.close() }, 250)
  }

  const confirm = () => {
    const isValid = codes.filter(c=>!!c).length === 4
    if (isValid) {
      setAnimation('fadeOutDown')
      setTimeout(()=>{ 
        props.confirm(codes.toString().replace(/,/g, ''))
      }, 250)
    } else {
      setIsWaring(true)
    }
  }

  return (
    <div className={`${Style.SmsVerify} ${animation}`}>
      <div className={`${Style.Box} ${animation+'Y'} em`}>
        <Header cancel={cancel} />
        <Content mobile={props.mobile} input={input} send={send} />
        { isWarning ? <Warning /> : null }
        <Footer confirm={confirm} cancel={cancel} />
      </div>
    </div>
  )
}

export default SmsVerify